@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-loader';

$sizes: 'xs', 's', 'm', 'l';

.spinner {
  pointer-events: none;
  stroke: currentColor;
  animation: spin 1s ease-in-out infinite;

  & > g > path {
    fill: currentColor;
  }

  & > mask {
    mask-type: alpha;
  }

  @each $size in $sizes {
    &[data-size="#{$size}"] {
      @include composite-var($loader, 'spiner', $size);
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}
